<template>
  <div>
    <tab>
      <tab-item @on-item-click="clickTab">助记词</tab-item>
      <tab-item @on-item-click="clickTab">官方钱包</tab-item>
      <tab-item @on-item-click="clickTab">私钥</tab-item>
    </tab>
    <box v-show="tab_index==0">
      <group>
        <x-textarea placeholder="助记词，按空格分隔" v-model="seed" :show-counter="false" ref="seed"></x-textarea>
        <x-input title="助记词格式 m/44'/60'/0'/0/" label-width="10.6rem" placeholder="0" v-model="seed_index" type="text"
                 ref="seed_index"></x-input>
      </group>
    </box>
    <box v-show="tab_index==1">
      <group>
        <x-textarea placeholder="keystore 文本内容" v-model="keystore" :show-counter="false" ref="keystore"></x-textarea>
        <x-input placeholder="keystore 密码" type="password" v-model="keystore_password" :min="4" :max="16"
                 ref="keystore_password" :required="true"></x-input>
      </group>
    </box>
    <box v-show="tab_index==2">
      <group>
        <x-textarea placeholder="明文私钥" v-model="private_key" :show-counter="false" ref="private_key"
                    :required="true"></x-textarea>
      </group>
    </box>

    <group title="钱包名称">
      <x-input placeholder="用于标识您的钱包" :min="4" :max="16" v-model="name" ref="name" :required="true"></x-input>
    </group>
    <group title="请输入密码">
      <x-input placeholder="钱包密码" type="password" v-model="password" :min="4" :max="16" ref="password"
               :required="true"></x-input>
      <x-input placeholder="再次输入钱包密码" type="password" v-model="confirm_password" :min="4" :max="16"
               :equal-with="password" ref="confirm_password" :required="true"></x-input>
    </group>
    <box gap="20px 10px">
      <x-button type="primary" style="border-radius:4px;" @click.native="importWallet">立即导入</x-button>
    </box>
  </div>
</template>

<script>
  import {XHeader, XInput, XButton, Box, AlertModule, Tab, TabItem, XTextarea, Loading} from 'vux';
  import woutlaEth from "@/ethereum";
  import woutlaCrypto from '@/crypto';

  export default {
    name: "ContentB",
    components: {
      "x-header": XHeader,
      "x-input": XInput,
      "x-button": XButton,
      "box": Box,
      "tab": Tab,
      "tab-item": TabItem,
      "x-textarea": XTextarea,
      "loading": Loading
    },
    data() {
      return {
        page_title: "",
        page_name: "",
        name: "",
        password: "",
        confirm_password: "",
        seed: "",
        seed_index: 0,
        keystore: "",
        keystore_password: "",
        private_key: "",
        tab_index: 0
      }
    },
    methods: {
      clickTab: function (index) {
        this.tab_index = index;
      },
      importWallet: function () {
        // 检查输入是否有效
        var valid = true;
        this.$refs.name.validate();
        this.$refs.password.validate();
        this.$refs.confirm_password.validate();
        if (!this.$refs.name.valid || !this.$refs.password.valid || !this.$refs.confirm_password.valid) {
          this.$refs.name.forceShowError = true;
          this.$refs.password.forceShowError = true;
          this.$refs.confirm_password.forceShowError = true;
          valid = false;
        }
        switch (this.tab_index) {
          case 0:
            this.$refs.seed_index.validate();
            if (!this.$refs.seed_index.valid) {
              this.$refs.seed_index.forceShowError = true;
              valid = false;
            }
            if (this.seed.trim() == "") {
              valid = false;
              AlertModule.show({
                title: '提示',
                content: "助记词不能为空",
                onShow() {
                },
                onHide() {

                }
              })
            }
            break;
          case 1:
            this.$refs.keystore_password.validate();
            if (!this.$refs.keystore_password.valid) {
              this.$refs.keystore_password.forceShowError = true;
              valid = false;
            }
            if (this.keystore.trim() == "") {
              valid = false;
              AlertModule.show({
                title: '提示',
                content: "keystore 不能为空",
                onShow() {
                },
                onHide() {

                }
              })
            }
            break;
          case 2:
            if (this.private_key.trim() == "") {
              AlertModule.show({
                title: '提示',
                content: "私钥不能为空",
                onShow() {
                },
                onHide() {

                }
              })
              valid = false;
            }
            break;
        }

        if (valid) {
          var loading = this.$loading({text: "正在导入"});
          var $vue = this;
          setTimeout(function () {
            try {
              var _wallet;
              switch ($vue.tab_index) {
                case 0:
                  _wallet = woutlaEth.wallet.createBySeed($vue.seed.trim(), "", $vue.seed_index);
                  break;
                case 1:
                  _wallet = woutlaEth.wallet.createByKeystore($vue.keystore.trim(), $vue.keystore_password);
                  break;
                case 2:
                  _wallet = woutlaEth.wallet.createByPrivate($vue.private_key.trim());
                  break;
              }
              var wallet = {};
              wallet.name = $vue.name;
              wallet.address = _wallet.address;
              wallet.enc_privateKey = woutlaCrypto.encrypt(_wallet.privatekey, $vue.password);
              $vue.$store.commit("addWallet", wallet);
              // $vue.$store.commit("loadProperties");

              AlertModule.show({
                title: '提示',
                content: "钱包导入成功",
                onShow() {
                },
                onHide() {
                  // router.replace("/wallet");
                }
              })
            } catch (ex) {
              console.log(ex);
              AlertModule.show({
                title: '提示',
                content: "导入失败，请核查您导入的资料",
                onShow() {
                },
                onHide() {

                }
              })
            }

            loading.close();
          }, 500);

        }


      }
    }
  }
</script>

<style lang="less" scoped>
  #wallet_import {
    .vux-x-input, .vux-x-textarea {
      font-size: .8rem;
    }
  }
</style>
